import React from 'react'
// import { Link } from 'react-router-dom'
import { 
  Row,
  Table,
  Input,
  Button,
  Form,
  Select,
  // DatePicker,
  // Modal,
  // message,
  Icon
} from 'antd'
import api from '@/api'
import { commoditytype } from '@/utils/type' // 商品类型
// const { RangePicker } = DatePicker
const FormItem = Form.Item
const ButtonGroup = Button.Group
const Option = Select.Option

const { Column } = Table
// const confirm = Modal.confirm
export default class Commodity extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      filter: {
        limit: 13,
        page: 1,
        name: '', // 商品名
        type: '', // 类型
        point: '', // 积分
        price: '', // 金额
        inventory: '', // 库存
        class_id: '', // 商品分类
        activity_area: '', // 活动专区
        is_hot: '', // 热门
        recommend: 0, // 推荐
        inventory_warn: 0 // 库存预警
      },
      goods: null,
      goods_count: null,
      searchLoading: false,
      goodsCategorylist: [],
      tableselect: [], // 多选选中的数据
      morefilter: false, // 更多选项控制
      goodsMaps: [] // 会员专区
      // commoditytype: commoditytype // 专属活动专区
    }
  }
  componentWillMount() {
    api.classify_getlist().then(({ data }) => {
      if (data.status === 'success') {
        // const goodsCategoryobj = {}
        // data.data.class.forEach(item => {
        //   goodsCategoryobj[item.id] = item.name
        // })
        this.setState({ goodsCategorylist: data.data.class})
      }
    })
    api.commodity_areamaps().then(({ data }) => {
      if (data.status === 'success') {
        this.setState({ goodsMaps: data.data.maps})
      }
    })
    this.fetchList(1)
  }
  fetchList = async (_page) => {
    const filter =  this.state.filter
    filter.page = _page
    let logsdata = null
    let goods = []
    let goods_count = 0
    try{
      logsdata = await api.commodity_getlist(filter)
    }catch{
      logsdata = {}
    }
    const data =  logsdata.data || {}
    if (data.status === 'success') {
      goods = data.data.goods.map((item, index) => {
        return {
          ...item,
          key: `${index}`
        }
      })
      goods_count = Number(data.data.goods_count)
    }
    this.setState({
      goods,
      goods_count,
      filter
    })
  }
  // 搜索
  handleSubmit = (e) => {
    e.preventDefault()
    this.fetchList(1)
  }
  changeFilter = (e, val) => {
    const value = typeof(e) === 'object' ? e.target.value : e
    const {filter} = this.state
    filter[val] = value
    this.setState({filter})
  }
  render() {
    const {filter, goods_count, goods, morefilter, goodsCategorylist, goodsMaps} = this.state
    return (
      <div>
        <Row
          gutter={20}
          className="mariya-filter-form"
          style={{height: 'auto'}}
          >
          <Form
            className="mariya-filter-form__entity"
            layout="inline"
            onSubmit={this.handleSubmit}
            style={{paddingLeft: '20px', minWidth: '1100px'}}
            >
            <FormItem>
              <Input
                size="default"
                placeholder="商品名称"
                value={filter.name}
                onChange={(e) => {this.changeFilter(e, 'name')}}
                allowClear
              />
            </FormItem>
            <FormItem>
              <Select
                onChange={(val) => { this.changeFilter(val, 'type') }}
                placeholder="请选择订单状态" allowClear style={{width: '140px'}}
              >
                {
                  commoditytype.map((item) => {
                   return <Option key={item.value}>{item.label}</Option>
                  })
                }
              </Select>
            </FormItem>
            <FormItem>
              <Input
                size="default"
                placeholder="所需积分"
                value={filter.point}
                onChange={(e) => {this.changeFilter(e, 'point')}}
                allowClear
              />
            </FormItem>
            <FormItem>
              <Input
                size="default"
                placeholder="所需金额"
                value={filter.price}
                onChange={(e) => {this.changeFilter(e, 'price')}}
                allowClear
              />
            </FormItem>
            <FormItem>
              <Input
                size="default"
                placeholder="库存"
                value={filter.inventory}
                onChange={(e) => {this.changeFilter(e, 'inventory')}}
                allowClear
              />
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">搜索</Button>
            </FormItem>
            <FormItem>
              <Button type="primary"
                style={{ display: morefilter ? 'inline-block': 'none'}}
                onClick={(e) => {this.setState({morefilter: false})}} >更多<Icon type="up" /></Button> 
              <Button
                style={{ display: morefilter ? 'none' : 'inline-block'}}
                onClick={(e) => {this.setState({morefilter: true })}} >更多<Icon type="down" /></Button>
            </FormItem>
            <br/>
            <FormItem style={{ display: morefilter ? 'inline-block': 'none'}}>
              <Select
                onChange={(val) => { this.changeFilter(val, 'class_id') }}
                placeholder="请选择订单状态" allowClear style={{width: '140px'}}
              >
                {
                  goodsCategorylist.map((item) => {
                   return <Option key={item.id}>{item.name}</Option>
                  })
                }
              </Select> }
            </FormItem>
            <FormItem style={{ display: morefilter ? 'inline-block': 'none'}}>
              <Select
                onChange={(val) => { this.changeFilter(val, 'activity_area') }}
                placeholder="请选择订单状态" allowClear style={{width: '140px'}}
              >
                {
                  goodsMaps.map((item) => {
                   return <Option key={item.value}>{item.label}</Option>
                  })
                }
              </Select>
            </FormItem>
            <FormItem >
              <Input
                size="default"
                placeholder="积分"
                value={filter.point}
                onChange={(e) => {this.changeFilter(e, 'point')}}
                allowClear
              />
            </FormItem>
            <FormItem style={{ display: morefilter ? 'inline-block': 'none'}}>
              <Input
                size="default"
                placeholder="快递单号"
                value={filter.express_num}
                onChange={(e) => {this.changeFilter(e, 'express_num')}}
                allowClear
              />
            </FormItem>
          </Form>
          <div className="mariya-filter-form__group">
            <ButtonGroup>
              <Button className="m_l_10" onClick={this.downloadExcel} >导出</Button>
            </ButtonGroup>
          </div>
        </Row>
        <Row className="mariya-datagrid">
          <Table
            dataSource={goods}
            size="small"
            bordered
            pagination={{
              defaultCurrent: 1,
              total: goods_count,
              defaultPageSize: filter.limit
            }}
            onChange={({current}) => {this.fetchList(current)}}
            >
            <Column title="编号" dataIndex="id" key="id"/>
            <Column title="创建时间"  key="created_at" dataIndex="created_at" />
            <Column title="类型" key="type_name" dataIndex="type_name" />
            <Column title="商品" key="name" dataIndex="name" />
            <Column  title="缩略图" key="cover_url"
              render={(record) => (<img className="litimg" style={{width: '30px', height: '30px'}} src={record.cover_url} alt="cover_url"/>)}
            />
            <Column title="商品分类" dataIndex="class_name" key="class_name"/>
            <Column title="标题" dataIndex="title" key="title" />
            <Column title="数量" dataIndex="inventory" key="inventory" />
            <Column title="所需积分" dataIndex="express_num" key="point" />
            <Column title="所需金额" dataIndex="status_name" key="price" />
            <Column title="运费" dataIndex="freight_fee" key="freight_fee" />
            <Column title="操作" key="actionbtn" width="240px"
              render={(record) => (
                <div>{
                  Number(record.is_shelf) > 0 ? 
                  <div>
                    <Button size="small">编辑</Button>
                    <Button size="small">上架</Button>
                    <Button size="small">规格</Button>
                    <Button size="small">删除</Button>
                  </div> : 
                  <Button size="small">下架</Button>
                }</div>
              )}
              center
            />
          </Table>
        </Row>
      </div>
    )
  }
}
